<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>帽儿山生态服务评估系统</title>
        <script type="text/javascript" include="leaflet.miniMap,leaflet.sidebyside" src="../../dist/leaflet/include-leaflet.js"></script>
		<script type="text/javascript" src="../js/include-web.js"></script>
        <script type="text/javascript" src="../js/jquery-3.5.0.js"></script>
        <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
        <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
        <script src="./selfdefined_js/background_map.js"></script>
        <script src="./selfdefined_js/zhuantitu_style.js"></script>
    
        <link rel="stylesheet" href="../leaflet/leaflet.css"/>
        <link rel="stylesheet" href="./selfdefined_js/mystyle.css"/>
        <link rel="stylesheet" type="text/css" href="../../dist/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/formSelects-v4.css" />
        <link rel="stylesheet" type="text/css" href="../../dist/layui/css/time.css" />
    </head>
    <body >
         <!-- logo -->
        <div class="logo"><img src="../../dist/layui/image/logo.png" alt=""></div>
        <div id="titleContent"></div>
        <div class="menuItem-right">
            <div class="menuItem-right">
                <ul>
                    <li ><a href="General.html">基本概况</a></li>
                    <li class="on"><a href="map_shower.html">生态评估</a></li>
                    <li><a href="Analysis.html">分析预测</a></li>
                  
                    <!-- <li>更多</li> -->
                    <li class="names">你好</li>
                    <li style="cursor: pointer;" onclick="logout()">退出</li>
                </ul>
            </div>
        </div>
        <!-- 按钮 -->
         <!-- 实物量  价值量 -->
         <div class="btns">
            <span onclick="changerasterFn()" class="qu"> 实物量</span>
            <span onclick="valuecpmputFn()" class="btns_on va">价值量</span>
        </div>
        <!-- 图例 -->
        <div class="legend">
            <div class="grad3" align="center" id="grad2"></div>
            <div class="grad2" align="center" id="grad"></div>
            <div class="grad1"></div>
            <div class="grad2" align="center" style="top: 207px;">0</div>
        </div>
         <!-- 时间轴 -->
        <div class="timeX">
            <div class="timeX-left" > <i class="layui-icon layui-icon-form" ></i></div>
            <div class="timeX-tip">
                <p onclick="handleCut('years')">按照年</p>
                <p onclick="handleCut('month')">按照月</p>
            </div>
            <!-- 按照年 -->
            <div class="timeX-right years" id="years">
            </div>
                <!-- 按照月 -->
                <div class="timeX-right month">
                    <div id="month"></div>
                    <span onclick="handleSwitchMonth('prev')" class="arrow-left"><</span>
                    <span onclick="handleSwitchMonth('next')" class="arrow-right">></span>
                </div>
         </div>
         <!-- 右侧按钮 -->
         <div class="btnList">
            <ul>
               <li onclick="liveFn()">区域实况</li>
               <li onclick="historyFn()">历史变化</li>
               <li onclick="valueFn()">价值统计</li>    
            </ul>
        </div>
        <!-- 底部按钮 -->
        <div class="footbtn">
            <div class="footbtn-shilia" onclick="SHPfn()">矢量地图</div>
            <div class="nofootbtn" onclick="remove_SHP()" >取消矢量</div>
            <div class="mapbtn">
                <p class="mapbtn-div" style="width: 182px;"> 
                    <span onclick="changeto_gaode_sat()" class="btns_on">高德影像</span>
                    <span onclick=" changeto_default_map()">高德地图</span>
                    <span onclick="changeto_google_map()" >谷歌地图</span>
                    <span onclick="changeto_google_sat()">谷歌影像</span>
                </p>
            </div>
        </div>
        <div class="btnList-content-one">  
           <div class="layui-form">
               <span>区域选择 &nbsp;</span>
               <select name="city" xm-select="select1" xm-select-show-count = '2' >
                   <option value="1">老山</option>
                   <option value="2">蜜蜂</option>
                   <option value="3">东林</option>
                   <option value="4">太平</option>
                   <option value="5">北林</option>
                   <option value="6">中林</option>
                   <option value="7">跃进</option>
                   <option value="8">新垦</option>
                   <option value="9">老爷岭</option>
                   <option value="10">尖砬沟</option>
               </select>
           </div>
           <div class="material">
               <span>实物量</span>
               <div id="webmap" style="width:400px;height:260px;"></div>
           </div>
           <div class="Quantity">
               <span>价值量</span>
               <div id="valuemap" style="width:400px;height:260px;"></div>
           </div>
        </div>
        <div class="btnList-content-two">
               <span>区域选择 &nbsp;</span>
               <select name="city" xm-select="select2" xm-select-show-count = '2' >
                   <option value="1" id='老山'>老山</option>
                   <option value="2">蜜蜂</option>
                   <option value="3">东林</option>
                   <option value="4">太平</option>
                   <option value="5">北林</option>
                   <option value="6">中林</option>
                   <option value="7">跃进</option>
                   <option value="8">新垦</option>
                   <option value="9">老爷岭</option>
                   <option value="10">尖砬沟</option>
               </select>
               <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                   <ul class="layui-tab-title">
                     <li class="layui-this">价值量</li>
                     <li>实物量</li>
                   </ul>
                   <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                           <div id="historymap" style="width:400px;height:320px;"></div>
                        </div>
                        <div class="layui-tab-item">
                            <div id="historyValuemap" style="width:400px;height:320px;"></div>
                        </div>
                   </div>
                </div>    
        </div>
        <div class="btnList-content-three">
            <span>区域选择 &nbsp;</span>
            <select name="city" xm-select="select3" xm-select-show-count = '2' >
                <option value="老山" id='老山'>老山</option>
                <option value="蜜蜂">蜜蜂</option>
                <option value="东林">东林</option>
                <option value="太平">太平</option>
                <option value="北林">北林</option>
                <option value="中林">中林</option>
                <option value="跃进">跃进</option>
                <option value="新垦">新垦</option>
                <option value="老爷岭">老爷岭</option>
                <option value="尖砬沟">尖砬沟</option>
            </select>
            <div id="allMap" style="width:400px;height:300px;"></div>
        </div>

         <!-- 导航 -->
        <div class="crile-show">
            <i class="layui-icon layui-icon-spread-left" style="font-size: 20px; color: #fff;"></i>
        </div>
        <div class="change-icon"><i class="layui-icon layui-icon-spread-left"  ></i> 生态价值评估</div>
        <!-- <div id="menu" class="layui-nav layui-nav-tree"  lay-filter="test"></div> -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menus" lay-shrink="all" >
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">涵养水源</a>
                <dl class="layui-nav-child">
                <dd class="layui-this"><a href="javascript:;" onclick="clickfn(1)">调节水量</a></dd>
                <dd><a href="javascript:;" onclick="clickfn(2)">净化水质</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">保育土壤</a>
                <dl class="layui-nav-child">
                <dd><a href="javascript:;" onclick="clickfn(3)">固土</a></dd>
                <dd><a href="javascript:;">保肥</a>
                    <dl class="layui-nav-child" >
                        <dd style="text-indent:2em"><a href="javascript:;" onclick="clickfn(4)">氮</a></dd>
                        <dd style="text-indent:2em"><a href="javascript:;" onclick="clickfn(5)">磷</a></dd>
                        <dd style="text-indent:2em"><a href="javascript:;" onclick="clickfn(6)">钾</a></dd>
                    </dl>
                </dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">固碳释氧</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="clickfn(7)">固碳量</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(8)">释氧量</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">积累营养物质</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="clickfn(9)">固氨</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(10)">固磷</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(11)">固钾</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">净化大气环境</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="clickfn(12)">释放负离子</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(13)">滞沉</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(14)">二氧化硫</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(15)">氮氧化物</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(16)">氟化物</a></dd>
                    <dd><a href="javascript:;" onclick="clickfn(17)">降噪</a></dd>
                    
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;" onclick="clickfn(18)">生物多样性</a>
            </li>
        </ul>
       
        <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
        <script src="./selfdefined_js/main.js"></script>
        <!-- <div id="map" style="margin:0 auto;width: 100%;height: 20%">
           
            <div id="map" style="margin:0 auto;width: 100%;height: 20%">
              
                <label onclick="changeto_default_map()">切换为default_map</label><br/>
                <label onclick="changeto_google_map()">切换为google_map</label><br/>
                <label onclick="changeto_google_sat()">切换为google_satellite</label><br/>
                <label onclick="changeto_gaode_sat()">切换为gaode_satellite</label><br/>
            </div>

            <div id="map" style="margin:0 auto;width: 30%;height: 20%">
                <label onclick="add_SHP('data','201803','gutan')">矢量1</label><br/>
                <label onclick="add_SHP('data','201804','gutan')">矢量2</label><br/>
                <label onclick="add_SHP('data','201805','gutan')">矢量3</label><br/>
                <label onclick="add_SHP('data','201806','gutan')">矢量4</label><br/>
                <label onclick="remove_SHP()">取消矢量专题图</label><br/>
            </div>
            <div id="map" style="margin:0 auto;width: 60%;height: 20%">
                
                <label onclick="changeraster('data','201803','gutan')">专题图1</label><br/>
                <label onclick="changeraster('data','201804','gutan')">专题图2</label><br/>
                <label onclick="changeraster('data','201805','gutan')">专题图3</label><br/>
                <label onclick="changeraster('data','201806','gutan')">专题图4</label><br/>
            </div>

        </div> -->
        <!--  -->
        <script src="../../dist/layui/echarts.min.js"></script>
		<script src="../../dist/layui/layui.js"></script>
        <script src="../../dist/layui/formSelects-v4.js"></script>
        <script type="text/javascript">
            let dateLine = null;
            //定义数组
            let arrLists = ['老山','蜜蜂','东林','太平','北林','中林','跃进','新垦','老爷岭','尖砬沟']
             layui.use('element', function(){
                var element = layui.element;
            
            });
            
			layui.formSelects.btns('select1', ['select']);
			layui.formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
                //id:           点击select的id
                //vals:         当前select已选中的值
                //val:          当前select点击的值
                //isAdd:        当前操作选中or取消
                //isDisabled:   当前选项是否是disabled
                //alert("选择了: " + vals);  
                
                //选中的数组 
                let valselectAyyay = []
                for(let i=0; i<vals.length; i++){
                    valselectAyyay.push(vals[i].name)
                }

                if(new_year){
                    //说明有年/月
                    if(new_year.length > 4 ){
                        //说明是月份 
                        if(vals.length <= 0){
                            //按照默认年份
                            getinitData(false,arrLists,2018)
                            getinitValue(false,arrLists,2018)
                            console.log(222)
                        }else{
                            getinitData(true,valselectAyyay,new_year)
                            getinitValue(true,valselectAyyay,new_year)
                        }
                    }else{
                        //说明是年
                        getinitData(false,valselectAyyay,new_year)
                        getinitValue(false,valselectAyyay,new_year)
                    }
                }else{
                    //说明没有选择时间
                    if(vals.length <= 0){
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                    }else{
                        getinitData(false,valselectAyyay,2018)
                        getinitValue(false,valselectAyyay,2018)
                    }                      
                }
                
                
            }, true);
            layui.formSelects.on('select2', function(id, vals, val, isAdd, isDisabled){
                //id:           点击select的id
                //vals:         当前select已选中的值
                //val:          当前select点击的值
                //isAdd:        当前操作选中or取消
                //isDisabled:   当前选项是否是disabled
                //alert("选择了: " + val.name);  
                //选中的数组 
                let valselectAyyay = []
                for(let i=0; i<vals.length; i++){
                    valselectAyyay.push(vals[i].name)
                }
                if(new_year){
                    if( new_year.length == 4 ){
                        if(vals.length <= 0){
                            gethistoryValue(arrLists,new_year)
                            gethistorymap(arrLists,new_year)
                        }else{
                            gethistoryValue(valselectAyyay,new_year)
                            gethistorymap(valselectAyyay,new_year)
                        } 
                    }
                }else{
                    if(vals.length <= 0){
                        gethistoryValue(arrLists,2018)
                        gethistorymap(arrLists,2018)
                    }else{
                        gethistoryValue(valselectAyyay,2018)
                        gethistorymap(valselectAyyay,2018)
                    }   
                        
                }
                
            }, true);
            layui.formSelects.on('select3', function(id, vals, val, isAdd, isDisabled){
                //id:           点击select的id
                //vals:         当前select已选中的值
                //val:          当前select点击的值
                //isAdd:        当前操作选中or取消
                //isDisabled:   当前选项是否是disabled
                //alert("选择了: " + val.name);  
                //选中的数组 
                let valselectAyyay = []
                for(let i=0; i<vals.length; i++){
                    valselectAyyay.push(vals[i].name)
                }
                if(vals.length <= 0){
                    allData(arrLists)
                }else{
                    allData(valselectAyyay)
                }
                
                
            }, true);
        //地图按钮点击事件
  
        $(".mapbtn-div>span").click(function() {
            $(this).siblings('span').removeClass('btns_on');
            $(this).addClass("btns_on")
        });
        //价值量图例
        function lendge(nav,hour){
            //http://172.16.100.59:12000
            $.ajax({ 
                type: "POST",   
                url: "/linda/magnitude/value/extreme",
                data: JSON.stringify({
                    biologicalType: nav,
	                recordMonth: hour
                }),
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    if (data.code == 200) { 
                        let obj = data.data
                        document.getElementById("grad").innerHTML= data.data
                        document.getElementById("grad2").innerHTML= '单位（元）'
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
        }
        //图例 实物量
        function physicalData(nav,hour){
            $.ajax({ 
                type: "POST",   
                url: "/linda/physical/quantity/extreme",
                data: JSON.stringify({
                    biologicalType: nav,
	                recordMonth: hour
                }),
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    if (data.code == 200) { 
                        let obj = data.data
                        document.getElementById("grad").innerHTML= data.data
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
        }
        //页面点击实物量 或者价值
        function changerasterFn(){
            type = 'data'
            if(!new_year){
                if(nav == 1){
                    name = 'hysy'
                    //调节水量
                    changeraster(type,time,name)
                    console.log(type,time,name,'实物量')
                }else if(nav == 0){
                    name = 'hysy'
                    //净化水源
                    changeraster(type,time,name)
                    
                    console.log(type,time,name,'实物量')
                }
                changeraster(type,time,name)
                //图例
                physicalData(nav,time)
            }else{
                if(nav == 1){
                    name = 'hysy'
                    //调节水量
                    changeraster(type,new_year,name)
                    //图例
                    physicalData(nav,new_year)
                    console.log(type,new_year,name,'实物量')
                }else if(nav == 0){
                    name = 'hysy'
                    //净化水源
                    changeraster(type,new_year,name)
                    //图例
                    physicalData(nav,new_year)
                    console.log(type,new_year,name,'实物量')
                }else if(time == null && ( nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17) ){
                    changeraster(type,null,name)
                    //图例
                    physicalData(nav,time)
                    console.log(time,nav,58)
                }else{
                    changeraster(type,new_year,name)
                    physicalData(nav,new_year)
                    console.log(type,new_year,name,'实物量01')
                }
               
            }
            $('.btns>span:nth-child(1)').addClass('btns_on')
            $('.btns>span:nth-child(2)').removeClass('btns_on')
            document.getElementById("grad2").innerHTML= '单位（g）'
            //console.log(type,time,name,'实物量')
            remove_SHP()
        }
        function valuecpmputFn(){
            type = 'value'
           
            if(!new_year){
                
                if(nav == 1){
                    //调节水量
                    name = 'hysy_tjsl'
                    changeraster(type,time,name)
                    console.log(type,time,name,'价值量')
                    
                }else if(nav == 0){
                    //净化水源
                    name = 'hysy_jhsz'
                    changeraster(type,time,name)
                    console.log(type,time,name,'价值量')
                }
                changeraster(type,time,name)
                lendge(nav,time)
            }else{
                
                if(nav == 1){
                    //调节水量
                    name = 'hysy_tjsl'
                    changeraster(type,new_year,name)
                    //图例
                    lendge(nav,new_year)
                    console.log(type,new_year,name,'价值量')
                    
                }else if(nav == 0){
                    //净化水源
                    name = 'hysy_jhsz'
                    changeraster(type,new_year,name)
                    //图例
                    lendge(nav,new_year)
                    console.log(type,new_year,name,'价值量')
                }else if(time == null && ( nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17) ){
                    changeraster(type,null,name)
                    //图例
                    lendge(nav,time)
                    console.log(time,nav,58)
                }else{
                    changeraster(type,new_year,name)
                    //图例
                    lendge(nav,new_year)
                    console.log(type,new_year,name,'价值量012')
                }   
            }
            $('.btns>span:nth-child(2)').addClass('btns_on')
            $('.btns>span:nth-child(1)').removeClass('btns_on')
            remove_SHP()
        }
        function SHPfn(){
            if(nav == 1){
                if(type == 'data' && !new_year){
                    add_SHP(type,time,name)
                    console.log(type,time,name,'实物量k')
                }else if(type == 'value' && !new_year){
                    add_SHP(type,time,name)
                    console.log(type,time,name,'价值量')
                }else if(new_year){
                    if(type == 'data'){
                        add_SHP(type,new_year,name)
                        console.log(type,new_year,name,'实物量0')
                    }else if(type == 'value'){
                        add_SHP(type,new_year,name)
                        console.log(type,new_year,name,'价值量01')
                    }
                }
            
            }else if(nav == 0){
                if(type == 'data' && !new_year){
                    add_SHP(type,time,name)
                    console.log(type,time,name,'实物量6')
                }else if(type == 'value' && !new_year){
                    add_SHP(type,time,name)
                    console.log(type,time,name,'价值量1')
                }else if(new_year){
                    if(type == 'data'){
                        add_SHP(type,new_year,name)
                        console.log(type,new_year,name,'实物量1')
                    }else if(type == 'value'){
                        add_SHP(type,new_year,name)
                        console.log(type,new_year,name,'实物量11')
                    }
                }
                
            }else{
 
                if(new_year && time != null){
                    add_SHP(type,new_year,name)
                    console.log(type,new_year,name,'选时间01')
                }else if(time == null && ( nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17)){
                    add_SHP(type,null,name)
                    console.log(type,null,name,'null时间02')
                }else if(!new_year &&  time != null){
                    add_SHP(type,time,name)
                    console.log(type,time,name,'默认时间03')

                }else if(new_year && time == null ){
                    add_SHP(type,new_year,name)
                   
                    console.log(type,new_year,name,'5555')
                }else{
                    console.log(type,time,name,'666')
                }
            }
            //隐藏上方按钮
           
            $('.footbtn-shilia').css('display','none')  
            $('.nofootbtn').css('display','block')  
           
            allData(arrLists)
             
        }
        //获取url值
        // function GetRequest() {  
        //     var url = location.search;
        //     //获取url中"?"符后的字串  
        //     var theRequest = new Object(); 
        //     if (url.indexOf("?") != -1) { 
        //         var str = url.substr(1); 
        //         strs = str.split("&");  
        //         for(var i = 0; i < strs.length; i ++) {  
        //             theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        //         }  
        //     }  
        //     return theRequest;  
        // } 
          //ajax获取数据价值量
        function getinitData(isyear,array,year){
            // http://172.16.100.59:12000
            $.ajax({ 
                type: "POST",   
                url: "/linda/magnitude/value/search",
                data: JSON.stringify({
                    biologicalType: nav,
                    month: isyear,
                    recordMonth: year,
                    forestAreaList: array
                }),
                xhrFields: {
                        withCredentials: true
                    },
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    if (data.code == 200) { 
                        let obj = data.data
                        //除以10000后的数组
                        let arr = []
                        arr = data.data.yaxis.map(i=> {return i/10000})
                      //  console.log(arr,1111)
                        generatevalue(arr,data.data.xaxis)
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
          }
          //获取价值统计
          function allData(array){
            let send=JSON.stringify(array)
            $.ajax({ 
                type: "POST",   
                url: "/linda/magnitude/value/summary",
                data: send,
                dataType: "json",
                contentType:"application/json",
                xhrFields: {
                    withCredentials: true
                },
                success: function(data){
                    if (data.code == 200) { 
                       
                        allChart(data.data)
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
          }
          //获取实物量
          function getinitValue(isyear,array,year){
            $.ajax({ 
                type: "POST",   
                url: "/linda/physical/quantity/search",
                data: JSON.stringify({
                    biologicalType: nav,
                    month: isyear,
                    recordMonth: year,
                    forestAreaList: array
                }),
                dataType: "json",
                contentType:"application/json",
                xhrFields: {
                    withCredentials: true
                },
                success: function(data){
                    if (data.code == 200) { 
                        let obj = data.data
                        generateChart(data.data)
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
          }
          
          //历史变化 -价值量
          function gethistoryValue(array,year){
            $.ajax({ 
                type: "POST",   
                url: "/linda/magnitude/value/history",
                data: JSON.stringify({
                    biologicalType: nav,
                    year: year,
                    forestAreaList: array
                }),
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    if (data.code == 200) { 
                        //let obj = data.data
                        let seriesAll = []
                        seriesAll = data.data.series.map((i)=>{
                            return{
                                type: 'line',
                                stack: '总量',
                                name: i.name,
                                data: i.data.map(i=>{return i/10000})

                            }
                        })
                        generateLine(seriesAll,data.data.xaxis)
                        
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
          }
          //历史变化 -实物量
          function gethistorymap(array,year){
            $.ajax({ 
                type: "POST",   
                url: "/linda/physical/quantity/history",
                data: JSON.stringify({
                    biologicalType: nav,
                    year: year,
                    forestAreaList: array
                }),
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                contentType:"application/json",
                success: function(data){
                    if (data.code == 200) { 
                        //let obj = data.data
                        let seriesAll = []
                        seriesAll = data.data.series.map((i)=>{
                            return{
                                type: 'line',
                                stack: '总量',
                                name: i.name,
                                data: i.data.map(i=>{return i/10000})
                            }
                        })
                        valueLine(seriesAll,data.data.xaxis)
                        
                    } else {
                        console.log('出现错误')
                    }  
                },
                error: function(jqXHR){     
                    alert("发生错误");  
                },     
            });
          }
          //右侧按钮
        function liveFn(){
            //$('.btnList-content-one').css('display','block')
            $('.btnList-content-one').toggle()
            $('.btnList>ul>li:nth-child(1)').addClass('activei')
            $('.btnList>ul>li:nth-child(2)').removeClass('activei')
            $('.btnList>ul>li:nth-child(3)').removeClass('activei')
            $('.btnList-content-two').css('display','none')
            $('.btnList-content-three').css('display','none')
            if(new_year){
                //说明有年/月
                if(new_year.length > 4){
                    console.log(new_year,'++')
                    //说明是月份 
                
                    //如果导航是特殊的 
                    if(nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17){
                        getinitData(true,arrLists,2018)
                        getinitValue(true,arrLists,2018)
                    } else{
                        getinitData(true,arrLists,new_year)
                        getinitValue(true,arrLists,new_year)
                    }
                }else{
                    //说明是年
                    console.log('--')
                    getinitData(false,arrLists,new_year)
                    getinitValue(false,arrLists,new_year)
                }
               
            }else{
                //说明没有默认
                getinitData(false,arrLists,2018)
                getinitValue(false,arrLists,2018)
            }
            
            layui.formSelects.value('select1', []);
        }
      
        function historyFn(){
            // $('.btnList-content-two').css('display','block')
            $('.btnList-content-two').toggle()
            $('.btnList>ul>li:nth-child(2)').addClass('activei')
            $('.btnList>ul>li:nth-child(1)').removeClass('activei')
            $('.btnList>ul>li:nth-child(3)').removeClass('activei')
            $('.btnList-content-one').css('display','none')
            $('.btnList-content-three').css('display','none')
            
            // new_year &&  new_year.length == 4?   gethistoryValue(arrLists,new_year): gethistoryValue(arrLists,2018)
            // new_year &&  new_year.length == 4?   gethistorymap(arrLists,new_year): gethistorymap(arrLists,2018)
            if(new_year &&  new_year.length == 4){
                // gethistorymap(arrLists,new_year)
                // gethistoryValue(arrLists,new_year)
               if(nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17){
                   //特殊的 展示暂无数据 
                    generateLine(arrLists,[])
                    valueLine(arrLists,[])
               }else{
                
                   //展示2018年
                   gethistoryValue(arrLists,2018)
                   gethistorymap(arrLists,2018)
               }
               
            }else{
                if(nav == 2 || nav == 3 || nav == 4 || nav == 5 || nav == 11 || nav == 12 || nav == 13 || nav == 14 || nav == 15 || nav == 16 || nav == 17){
                     //特殊的 展示暂无数据 
                    // echarts.init(document.getElementById('historyValuemap')).dispose()
                    // echarts.init(document.getElementById('historymap')).dispose()
                   
                    generateLine(arrLists,[])
                    valueLine(arrLists,[])
                }else{
                    gethistoryValue(arrLists,2018)
                    gethistorymap(arrLists,2018)
                }
                
            }
            layui.formSelects.value('select2', []);
            
        }
        function valueFn(){
            // $('.btnList-content-three').css('display','block')
            $('.btnList-content-three').toggle()
            $('.btnList>ul>li:nth-child(3)').addClass('activei')
            $('.btnList-content-one').css('display','none')
            $('.btnList-content-two').css('display','none')
            $('.btnList>ul>li:nth-child(1)').removeClass('activei')
            $('.btnList>ul>li:nth-child(2)').removeClass('activei')
            allData(arrLists)
            //如果是矢量需要置空
            if($('.footbtn-shilia').css("display")=="block"){
                //隐藏的
                layui.formSelects.value('select3', []);
            }else{
                //显示的
            }
            
        }
          //生成饼图
        function generateChart(data) {
          
            //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('webmap'));
                if(data.length <= 0){
                    myChart.showLoading({
                        text : '暂无数据',
                        maskColor: '#373737',
                        zlevel: 1111,
                        textColor: '#fff',
                    });
                }else{
                    //指定图表的配置项和数据
                    myChart.clear();
                    var option = {
                        //提示框组件
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        color:['#ff4e48','#FEC400','#58eaff','#8effcb','#64f897'],
                        legend: {
                            left: 'left',
                            padding:[20,0,0,15],
                            textStyle: { //图例文字的样式
                                color: '#fff',
                                fontSize: 14,
                            },
                            data: data
                        },
                        
                        //系列列表。每个系列通过type决定自己的图表类型
                        series: [
                            {
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: data//处理小数点数据
                            }
                        ]
                    };
                    myChart.hideLoading();
                    //使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);
            }
            
        }
         //价值统计饼图
         function allChart(data) {
            //基于准备好的DOM，初始化echarts实例
            var myChart = echarts.init(document.getElementById('allMap'));
            //指定图表的配置项和数据
            myChart.clear();
            var option = {
                //提示框组件
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color:['#ff4e48','#FEC400','#58eaff','#8effcb','#64f897'],
                legend: {
                    left: 'left',
                    padding:[20,0,0,15],
                    textStyle: { //图例文字的样式
                        color: '#fff',
                        fontSize: 14,
                    },
                    data: data
                },
                
                //系列列表。每个系列通过type决定自己的图表类型
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '70%'],
                        data: data//处理小数点数据
                    }
                ]
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }
        //柱状图
        function generatevalue(data,data2) {
            //基于准备好的DOM，初始化echarts实例
            var myChart = echarts.init(document.getElementById('valuemap'));
            //指定图表的配置项和数据
            if(data.length <=0 || data2.length <=0){
                myChart.showLoading({
                    text : '暂无数据',
                    maskColor: '#373737',
                    zlevel: 1111,
                    textColor: '#fff',
                });
            }else{
                myChart.clear()
                    var option = {
                        grid: {  
                            top: '10%',  
                            left: '0',  
                            containLabel: true  
                        } ,
                        xAxis: {
                            type: 'category',
                            data: data2,
                            axisLine:{
                                lineStyle: {
                                    color: '#fff',
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                }
                            },
                            axisLabel:{
								formatter:'{value} 万元'
							}
                        },
                        series: [{
                            data: data,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };
                    myChart.hideLoading();
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                 }
           
        }
        //折线图--实物量
        function generateLine(data,data2) {
                //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('historymap'));
                if(data.length <=0 || data2.length <=0 ){
                    myChart.setOption({
                        tooltip:{
                            show :false
                        }
                    });
                      
                    myChart.showLoading({
                        text : '暂无数据',
                        maskColor: '#373737',
                        zlevel: 1111,
                        textColor: '#fff',
                    });
        
                    
                }else{
                //指定图表的配置项和数据
                myChart.clear()
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:data,//提示文字
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                    grid: {
                        left: '0%',
                        bottom: '3%',
                        top:'25%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data2,
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                            }
                        },
                        axisLabel:{
                            formatter:'{value} 万元'
                        }
                    },
                    series:data
                };
                myChart.hideLoading();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                }
            }
          //折线图--价值量
          function valueLine(data,data2){
                //基于准备好的DOM，初始化echarts实例
                var myChart = echarts.init(document.getElementById('historyValuemap'));
                if(data.length <=0 || data2.length <=0 ){
                    myChart.setOption({
                        tooltip:{
                            show :false
                        }
                    });
                    myChart.showLoading({
                        text : '暂无数据',
                        maskColor: '#373737',
                        zlevel: 1111,
                        textColor: '#fff',
                    });
                    
                }else{
                     //指定图表的配置项和数据
                    myChart.clear()
                    option = {
                        
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:data,//提示文字
                            textStyle: { //图例文字的样式
                                color: '#fff',
                                fontSize: 14,
                            },
                        },
                        grid: {
                            left: '0%',
                            bottom: '3%',
                            top:'25%',
                            containLabel: true
                        },
                        // toolbox: {
                        //     feature: {
                        //         saveAsImage: {}
                        //     }
                        // },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data2,
                            axisLine:{
                                lineStyle: {
                                    color: '#fff',
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine:{
                                lineStyle: {
                                    color: '#fff',
                                }
                            },
                            axisLabel:{
                                formatter:'{value} 万元'
                            }
                        },
                        series:data
                    };
                    myChart.hideLoading();
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
               
          }
		  //伪造数据
		     var but=document.querySelector(".timeX-left");
             let tip=document.querySelector(".timeX-tip");
             var years = [{ t: "2018", v: 10 }, { t: "2019", v: 10 }]
             var month = [
                   { t: '201801', v: 10 }, { t: '201802', v: 10 }, { t: '201803', v: 30 }, { t: '201804', v: 30 }, { t: '201805', v: 30 }, { t: '201806', v: 20 }, { t: '201807', v: 30 }, { t: '201808', v: 80 }, { t: '201809', v: 90 },{ t: '201810', v: 90 },{ t: '201811', v: 90 },{ t: '201812', v: 10 },
                   { t: '201901', v: 10 }, { t: '201902', v: 10 }, { t: '201903', v:10 }, { t: '201904', v:10 }, { t: '201905', v: 20 }, { t: '201906', v: 20 }, { t: '201907', v: 30 }, { t: '201908', v: 80 }, { t: '201909', v: 90 },{ t: '201910', v: 90 },{ t: '201911', v: 90 },{ t: '201912', v: 10 }
                ]
            // var month2 = [
            //        { t: '201801', v: 10 }, { t: '201802', v: 10 }, { t: '201803', v: 30 }, { t: '201804', v: 30 }, { t: '201805', v: 30 }, { t: '201806', v: 20 }, { t: '201807', v: 30 }, { t: '201808', v: 80 }, { t: '201809', v: 90 },{ t: '201810', v: 90 },{ t: '201811', v: 90 },{ t: '201812', v: 10 },
            //        { t: '201901', v: 0 }, { t: '201902', v: 10 }, { t: '201903', v:10 }, { t: '201904', v:10 }, { t: '201905', v: 20 }, { t: '201906', v: 20 }, { t: '201907', v: 30 }, { t: '201908', v: 80 }, { t: '201909', v: 90 },{ t: '201910', v: 90 },{ t: '201911', v: 90 },{ t: '201912', v: 0 }
            //     ]
             var month_index = 0
            

             // 初始化年并执行
             var cut = document.querySelectorAll('.timeX-tip p')
             cut[0].className = 'cur'
             //let variable = GetRequest()
             //定义全局变量
             var new_year;
             
             //定义参数
             let type;
             let time;
             let name;
             let nav;
             
            
             //默认传价值量 
             changeraster('value','201801','hysy_tjsl',1)
             updateHtml(month, 'month')
             type='value'
             time='201801'
             name= 'hysy_tjsl'
             nav = 1,
             
            
            $('.timeX-left').click(()=>{
                $('.timeX-tip').css('display','block')
            })
            
            // function myFunction(event){
            //     event.stopPropagation();
            //     tip.style.display = 'block'
            // }
            var item;
            item = document.querySelectorAll('.timeX-right li')
            if(!new_year){
                item[0].className = 'active'
            }   
            if(JSON.parse(window.localStorage.getItem('nickname'))){
				$('.names').html(JSON.parse(window.localStorage.getItem('nickname'))+ ' 你好')
			}else{
				$('.names').html( '用户未登陆')
			}	
            $('#titleContent').html('涵养水源 / 调节水量')
            //执行图例
             lendge(1,'201801')
            
            //点击任何一处隐藏
            // window.onclick = function(event){
            //     tip.style.display = "none"
            // }
             //条件切换年月
             function handleCut(key){
                if(key === 'years'){
                   
                    cut[1].className = ''
                    cut[0].className = 'cur'
                    
                    document.querySelector('.month').style.display = 'none'
                    document.getElementById('years').style.display = 'block'
                    tip.style.display = 'none'
                    month_index = -1
                    updateHtml(years, key)
                    
                }else{
      
                    cut[1].className = 'cur'
                    cut[0].className = ''
                    
                    document.querySelector('.' + key).style.display = 'block'
                    document.getElementById('years').style.display = 'none'
                    tip.style.display = 'none'
                    month_index = 0
                    updateHtml(month, key)  
                    if(new_year){
                        $('#month').find(`[attr=${dateLine}]`).addClass('active');
                    }else{
                        //201801成为高亮
                        $('#month').find(`[attr=201801]`).addClass('active');
                    }     
                }
              
             }
             //切换月
             function handleSwitchMonth(key){

                month_index = key === 'prev'? 0 : 1;
                 updateHtml(month, 'month')
                if(new_year){
                    $('#month').find(`[attr=${dateLine}]`).addClass('active');
                    $('#month>ul>li').find(`[attr=${dateLine}]`).css('display','block');
                    
                }else{
                    //201801成为高亮
                    $('#month').find(`[attr=201801]`).addClass('active');
                }
             }

             //点击切换小圆圈获取v属性值
             function handleItem(e,year,month,v){
               
                 if(v){
                    dateLine = year;
                    layui.formSelects.value('select1', []);
                    layui.formSelects.value('select2', []);
                    //当前年份和v值
                    new_year = month ? (year + '-' + (month < 10 ? '0' + month : month)) : (year + '');
                    //getMapsAjax(new_year, v)
                    item = document.querySelectorAll('.timeX-right li')
                    for ( let i =0 ; i < item.length; i++) {
                        if(item[i].className.indexOf('active') > -1){
                            item[i].className = ''
                            item[i].firstChild.style.display ='none'
                        }
                    }
                   
                    e.className = 'active'
                    e.firstChild.style.display ='block'       
                    if(month_index == 0  || month_index == 1){
                        
                        //月份变化  地图发生变化
                        changeraster(type,new_year,name)
                        
                        console.log(type,new_year,name,147)
                        // 折线
                        generateLine([],[])
                        valueLine([],[])
                    }
                    
                    if(new_year.length > 4){
                  
                        //说明是月份 
                        getinitData(true,arrLists,new_year)
                        getinitValue(true,arrLists,new_year)
                        //历史
                        gethistorymap(arrLists,2018)
                        gethistoryValue(arrLists,2018)

                    }else{
                      
                        //说明是年
                        getinitData(false,arrLists,new_year)
                        getinitValue(false,arrLists,new_year)
                        //调用历史
                        gethistoryValue(arrLists,new_year)
                        gethistorymap(arrLists,new_year)
                        
                    }
                    //图例
                    lendge(nav,year)
                    remove_SHP()
                }

             }
             //这里ajax请求
             function getMapsAjax(t,v){
                //console.log(t,v)
             }

            //渲染数据到页面
             function updateHtml(data, el){
                 var new_data = data
                 var html_str  = '<ul>'
                 if(month_index !== -1){
                     new_data = new_data.slice(month_index*12, 12*(month_index+1))
                 }
                for(var i=0; i<new_data.length; i++){
                
                    html_str += '<li onclick="handleItem(this,'+ new_data[i].t.split('-')[0] +','+ new_data[i].t.split('-')[1] +','+ new_data[i].v +')"  attr ="'+new_data[i].t+'"  class="'+ (new_data[i].v ? '' : 'disabled') +'"><div class="tip"  attr ="'+new_data[i].t+'">'+ new_data[i].t +'</div></li>'
                }
                html_str += '</ul>'
                
                document.getElementById(el).innerHTML = html_str
             }
            
             //退出
             function logout(){
                let self = this
                //http://172.16.100.59:12000
                $.ajax({
                    type: "get",
                    url: '/linda/logout',
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            window.location.href = '/load.html'
                            window.localStorage.removeItem('nickname')
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
             }
             function popToFeature(e) {
                var layer = e.target;
                allname = layer.feature.properties
                let arr = []
                arr.push(allname.林区名)
                console.log(arr,'我要的0000值')
                 //展开价值统计
                $('.btnList-content-three').css('display','block')
                $('.btnList>ul>li:nth-child(3)').addClass('activei')
                layui.formSelects.value('select3', arr);
                //隐藏其他的值
                $('.btnList-content-two').css('display','none')
                $('.btnList-content-one').css('display','none')
                $('.btnList>ul>li:nth-child(2)').removeClass('activei')
                $('.btnList>ul>li:nth-child(1)').removeClass('activei')
                
                allData(arr)
                
                layer.bindPopup("ID: " + layer.feature.properties.林区名 +"<br>" + "面积" + "：" + layer.feature.properties.AREA);
                
            }
             //导航点击事件
            function  clickfn(n){
                switch (n) {
                    case 1:
                        type= 'value',
                        name = 'hysy_tjsl',
                        nav = 1,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                       
                        if(new_year){
                            changeraster('value',new_year,'hysy_tjsl',1)
                             //echarts 图表
                             getinitData(true,arrLists,new_year)
                             getinitValue(true,arrLists,new_year)
                              //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,new_year)
                        
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201801','hysy_tjsl',1)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)

                             //图例
                             lendge(nav,time)
                            
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        remove_SHP()
                        $('#titleContent').html('涵养水源 / 调节水量')
                        break;
                    case 2:
                        type= 'value',
                        name = 'hysy_jhsz',
                        nav = 0,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                        if(new_year){
                            changeraster('value',new_year,'hysy_tjsl',1)
                            //echarts 图表
                            getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                             //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,new_year)
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201801','hysy_jhsz',0)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        remove_SHP()
                        $('#titleContent').html('涵养水源 / 净化水质')
                        break;
                    case 3:
                        type= 'value',
                        name = 'bcs_gt',
                        nav = 2,
                        time = null,
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','bcs_gt',2)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                       //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                        //图例
                        lendge(nav,null)
                        remove_SHP()
                        $('#titleContent').html('保育土壤 / 固土')
                        break;
                    case 4:
                        type= 'value',
                        name = 'bcst_n',
                        nav = 3,
                        time = null,
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','bcst_n',3)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //echarts 暂无图表
                         //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                        //图例
                        lendge(nav,null)
                        remove_SHP()
                        $('#titleContent').html('保育土壤 / 保肥 / 氮')
                        break;
                    case 5:
                        type= 'value',
                        name = 'bcst_p',
                        nav = 4,
                        time = null,
                        
                         //时间轴隐藏
                         $('.timeX').css('display','none')
                        
                        changeraster('value','null','bcst_p',4)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //echarts 暂无图表
                         //历史变化
                        //  gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                        //图例
                        lendge(nav,null)
                        remove_SHP()
                        $('#titleContent').html('保育土壤 / 保肥 / 磷')
                        break;
                    case 6:
                        type= 'value',
                        name = 'bcst_k',
                        nav = 5,
                        time = null,
                       
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                       
                        changeraster('value','null','bcst_k',5)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //echarts 暂无图表
                         //历史变化
                        //  gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                        //图例
                        lendge(nav,null)
                        remove_SHP()
                        $('#titleContent').html('保育土壤 / 保肥 / 钾')
                        break;
                    case 7:
                        type= 'value',
                        name = 'gutan',
                        nav = 6,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                        if(new_year){
                            changeraster('value',new_year,'gutan',6)
                            //echarts 图表
                            getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                             lendge(nav,new_year)
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201801','gutan',6)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                             //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                             //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                       
                        remove_SHP()
                        $('#titleContent').html('固碳释氧 / 固碳量')
                        break;
                    case 8:
                        type= 'value',
                        name = 'sy',
                        nav = 7,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                        if(new_year){
                            changeraster('value',new_year,'sy',7)
                            //echarts 图表
                            getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,new_year)
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201803','sy',7)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                             //历史变化
                             gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        remove_SHP()
                        $('#titleContent').html('固碳释氧 / 释氧量')
                         break;
                    case 9:
                        type= 'value',
                        name = 'yyjl_gll',
                        nav = 9,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                        if(new_year){
                            changeraster('value',new_year,'yyjl_gll',9)
                             //echarts 图表
                            getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                             //图例
                             lendge(nav,new_year)
                        }else{
                            time = '201801',
                            changeraster('value','201801','yyjl_gll',9)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                         
                        remove_SHP()
                        $('#titleContent').html('积累营养物质 / 固氨')
                         break;
                    case 10:
                        type= 'value',
                        name = 'yyjl_gll',
                        nav = 9,
                        $('.timeX').css('display','block')
                        if(new_year){
                            changeraster('value',new_year,'yyjl_gll',9)
                            //echarts 图表
                            getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,new_year)
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201801','yyjl_gll',9)
                            //echarts 图表
                            getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        $('#titleContent').html('积累营养物质 / 固磷')
                        remove_SHP()
                        break;
                    case 11:
                        type= 'value',
                        name = 'yyjl_gjl',
                        nav = 10,
                        $('.timeX').css('display','block')
                        item = document.querySelectorAll('.timeX-right li')
                        if(new_year){
                            changeraster('value',new_year,'yyjl_gjl',10)
                             //echarts 图表
                             getinitData(true,arrLists,new_year)
                            getinitValue(true,arrLists,new_year)
                            //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,new_year)
                        }else{
                            for ( let i =0 ; i < item.length; i++) {
                                if(item[i].className.indexOf('active') > -1){
                                    item[i].className = ''
                                    item[i].firstChild.style.display ='none'
                                }
                            }
                            item[0].className = 'active'
                            time = '201801',
                            changeraster('value','201801','yyjl_gjl',10)
                             //echarts 图表
                             getinitData(true,arrLists,time)
                            getinitValue(true,arrLists,time)
                           //历史变化
                            gethistoryValue(arrLists,2018)
                            gethistorymap(arrLists,2018)
                            //图例
                            lendge(nav,time)
                        }
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        remove_SHP()
                        $('#titleContent').html('积累营养物质 / 固钾')
                        break;
                    case 12:
                        type= 'value',
                        name = 'dqjh_flzl',
                        nav = 11,
                        time = null,
                        
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','dqjh_flzl',11)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //echarts 暂无图表
                        //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 释放负离子')
                         break;
                    case 13:
                        type= 'value',
                        name = 'dqjh_zc',
                        nav = 12,
                        time = null,
                        
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','dqjh_zc',12)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 滞沉')
                        break;
                    case 14:
                        type= 'value',
                        name = 'dqjh_so2',
                        nav = 13,
                        time = null,
                        
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                         changeraster('value','null','dqjh_so2',13)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                         //echarts 暂无图表
                         getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                        //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 二氧化硫')
                        break;
                    case 15:
                        type= 'value',
                        name = 'dqjh_no',
                        nav = 14,
                        time = null,
                        
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','dqjh_no',14)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                         //echarts 暂无图表
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                         //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 氮氧化物')
                        break;
                    case 16:
                        type= 'value',
                        name = 'dqjh_hf',
                        nav = 15,
                        time = null,
                        
                         //时间轴隐藏
                         $('.timeX').css('display','none')
                        changeraster('value','null','dqjh_hf',15)
                        $('.btns>span:nth-child(1)').removeClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                         //echarts 暂无图表
                        getinitData(false,arrLists,2018)
                        getinitValue(false,arrLists,2018)
                        //历史变化
                        // gethistoryValue(arrLists,2018)
                        // gethistorymap(arrLists,2018)
                        generateLine(arrLists,[])
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 氟化物')
                        break;
                    case 17:
                        type= 'value',
                        name = 'dqjh_jzjz',
                        nav = 16,
                        time = null,
                        //时间轴隐藏
                        $('.timeX').css('display','none')
                        changeraster('value','null','dqjh_jzjz',16)
                        //判定是否有实物量
                        $('.btns>span:nth-child(1)').addClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                         //echarts 暂无图表
                        getinitValue(false,arrLists,2018)
                        generateLine([],[])
                        //历史变化
                        //gethistoryValue(arrLists,2018)
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                        remove_SHP()
                        $('#titleContent').html('净化大气环境 / 降噪')
                        break;
                    case 18:
                        type= 'value',
                        name = 'bhswdyx',
                        nav = 17,
                        time = null,
                        //时间轴隐藏
                        $('.timeX').css('display','none') 
                        changeraster('value','null','bhswdyx',17)
                        //判定是否有实物量
                        $('.btns>span:nth-child(1)').addClass('dataActive')
                        $('.qu').removeClass('btns_on')
                        $('.va').addClass('btns_on')
                        //echarts 暂无图表
                        getinitValue(false,arrLists,2018)
                        generateLine([],[])

                        //历史变化
                        //gethistoryValue(arrLists,2018)
                        valueLine(arrLists,[])
                         //图例
                         lendge(nav,time)
                      
                        remove_SHP()
                        $('#titleContent').html('生物多样性')
                        break;
                    
                } 
            } 
         </script>
    </body>
</html>